import React from 'react'
import { TabBar } from 'antd-mobile';
import { withRouter } from 'react-router-dom';
import './style.scss'

class TabBarExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'home',
    };
    this.pathnameList = ['home', 'classification', 'shoppingCart', 'mine'];
    this.tabList = [
      {
        title: "首页",
        type: 'home',
        icon: 'https://m.360buyimg.com/mobilecms/jfs/t18526/211/696109898/3876/a61be82c/5aa10cd2N1318ac50.png',
        selectedIcon: 'https://m.360buyimg.com/mobilecms/jfs/t15145/137/2502885754/3106/de5e0b14/5aa10cd2N46f18ce6.png',
        badge: 1,
      },
      {
        title: "分类",
        type: 'classification',
        icon: 'https://m.360buyimg.com/mobilecms/jfs/t19183/49/696491919/3763/dec8cceb/5aa10cdbNa9cd0320.png',
        selectedIcon: 'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/33669/19/3432/3731/5cb48c9cEb2f5593b/060ffe532d67562b.png',
        badge: 1,
      },
      {
        title: "购物车",
        type: 'shoppingCart',
        icon: 'https://m.360buyimg.com/mobilecms/jfs/t18583/69/717127328/4407/5e47882b/5aa10ceaN649eec12.png',
        selectedIcon: 'https://m.360buyimg.com/mobilecms/jfs/t19183/49/696491919/3763/dec8cceb/5aa10cdbNa9cd0320.png',
        badge: 1,
      },
      {
        title: "我的",
        type: 'mine',
        icon: 'https://m.360buyimg.com/mobilecms/jfs/t16849/271/702371255/4462/d55edd83/5aa10cf6Nee5122a5.png',
        selectedIcon: 'https://m.360buyimg.com/mobilecms/jfs/t18598/41/712219415/3756/7828621f/5aa10cf6Nbfbdc1af.png',
        badge: 1,
      }
    ]
  }
  componentDidUpdate() {
    const pathname = this.props.location.pathname;
    this.pathnameList.forEach(value => {
      if (pathname.indexOf(value) > -1 && value !== this.state.selectedTab) {
        this.setState({
          selectedTab: value,
        })
      }
    })
  }
  componentDidMount() {
    let pathname = this.props.location.pathname.split('/')
    this.setState({
      selectedTab: pathname[pathname.length - 1],
    })
  }
  changeTab = (selectedTab) => {
    if (selectedTab == 'shoppingCart') {
      this.props.history.push('/shoppingCart');
      return true;
    }
    this.setState({
      selectedTab
    })
    let pathname = this.props.location.pathname.split('/')
    pathname[pathname.length - 1] = selectedTab;
    this.props.history.push(pathname.join('/'));
  }
  render() {
    return (
      <div className="nav-tab-bar">
        <TabBar
          tintColor="#e02433"
          prefixCls="am-tab-bar"
          tabBarPosition="bottom">
          {
            this.tabList.map(value => (
              <TabBar.Item
                key={value.type}
                selected={this.state.selectedTab == value.type}
                onPress={this.changeTab.bind(this, value.type)}
                icon={<img className="nav-img" src={value.icon} />}
                selectedIcon={<img className="nav-img" src={value.selectedIcon} />}>
              </TabBar.Item>
            ))
          }
        </TabBar>
      </div>
    )
  }
}
export default withRouter(TabBarExample)